 <table width=100% align="center" cellpadding="0" cellspacing="0" id=monitor>
<thead>
		<tr>
			<th data-field="sumary" ><b>Sumary Jobs</b></th>
			<th data-field="worklist"  ><b>Worklist</b></th>
		</tr>
</thead>
<tr>
<td   valign="top">
 <div id="example" class="k-content">
 	
            <div class="chart-wrapper">
                <div id="chart2"></div>
            </div>
  </div>
</td>
<td height=300 valign="top">
	<table id=worklist >
	 <thead>
		<tr>
			<th data-field="wf_id">Flow Id</th>
		
			<th data-field="wf_date">Date</th>
			<th data-field="wf_job_title">Job</th>
			<th data-field="wf_job_status">Status</th>
			<!--  <th data-field="wf_from">From</th> -->
			<th  data-field="view" >view</th>
		</tr>
	 </thead>
	<?php 
		$i=1;
		//print_r($workflow);
		foreach ($workflow  as $w) 
				{
	?>
					<tr>
						<td><?php echo $i;?></td>
						<td><?php echo $w["startTime"];?></td>
						<td><?php echo $w["work_title"];?></td>
						<td><?php echo $w["status"];?></td>
					<!-- 	<td><?php echo $w["from_user"];?></td> -->
						<td>
						
						
						<?php 
						echo 
								  "<div align='center'>".anchor("/approve/detail_masterreel/". $w["workflow_id"]."/".$w["instance_id"] ,
								  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
						
								   
						?>
						</td>
					</tr>
	<?php $i++; }?>
	</table>
</td>
</tr>
</table>
<br>
 <table id="history">
        <thead>
          <tr>
            <th data-field="hitory"><div align="left"><b>Hostory</b></div></th> 
          </tr>
         </thead>
    	<tr>
		  	<td>          
		 <table id="grid">
		        <thead>
		          <tr>
		            <th data-field="t_id"><div align="center">No.</div></th> 
		            <th data-field="date"><div align="center">Date</div></th>
		             <th data-field="form"><div align="center">Form</div></th>
		            <th data-field="type_product"><div align="center">Type</div></th>
		            <th data-field="type_of"><div align="center">Type</div></th>
		            <th data-field="gram"><div align="center">Gram</div></th>
		            <th data-field="reel_no"><div align="center">Reel No</div></th>
		            <th data-field="grade"><div align="center">Grade</div></th>
		             <th data-field="userkey"><div align="center">User Key</div></th>
			   <th data-field="status"><div align="center">Status</div></th>
		            <th data-field="control"><div align="center">Control</div></th>
		          </tr>
		        </thead>
		        <tbody>
		        <?php foreach ($rs as $r) 
				{
		          echo "<tr>";
		          echo "<td>"."<div align='center'>".$r['order_id']."</div>"."</td>";
		          echo "<td>".$r['modify_date']."</td>";
		          echo "<td>".$r['form_name']."</td>";
		          echo "<td>".$r['type_product']."</td>";
		          echo  "<td>".$r['type_of']."</td>";
		          echo  "<td>". $r['gram']. "</td>";
		          echo  "<td>". $r['reel_no']. "</td>";
		          echo  "<td>". $r['grade']. "</td>";
		          echo  "<td>". $r['user_keyin']. "</td>";
				  echo  "<td>"  ;
				  if($r['status']){
				  	echo "<font color=Green>";
				  	echo $r['status_text'];
				  	echo "</font>";
				  }else{
				  	
				  	echo "<font color=Red>";
				  	echo $r['status_text'];
				  	echo "</font>";
				  }
				  echo " </td>";
				  echo  "<td>";
				  //echo 
				  if($r['form_id']==1)
				  {
				echo 
				  "<div align='center'>".anchor("masterreel/detail_masterreel/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
		
				  }
				  if($r['form_id']==2)
				  {
				echo 
				  "<div align='center'>".anchor("pulpstrength/detail_pulpstrength/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
				  }
				  if($r['form_id']==3)
				  {
				echo 
				  "<div align='center'>".anchor("foliosheet/detail_foliosheet/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
				  }
				  if($r['form_id']==4)
				  {
				echo 
				  "<div align='center'>".anchor("finalcheck/detail_finalcheck/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
				  }
				  if($r['form_id']==5)
				  {
				echo 
				  "<div align='center'>".anchor("pulpstrength/detail_pulpstrength/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
				  }
				  if($r['form_id']==6)
				  {
				echo 
				  "<div align='center'>".anchor("pulpstrength/detail_pulpstrength/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
				  }
				  if($r['form_id']==7)
				  {
				echo 
				  "<div align='center'>".anchor("starch/detail_starch/".$r['t_id'],
				  "<input type='submit' name='Submit' id='Submit' value='แสดง'class='k-button'/>")."</div>";
				  }
				  echo  "</td>";
		          echo  "</tr>";
				}
		          ?>
        </tbody>
      </table>
      </td>
     </tr>
</table>
 
            <style scoped>
                .chart-wrapper {
                	margin: 0 0 0 00px;
                	width: 300px;
                	height:220px;
                	
                }
                
                .chart-wrapper .k-chart {
                    height: 210px;
                    padding: 10px;
                    width: 400px;
                }
            </style>     


    <script>
			function createChart2() {
			    $("#chart2").kendoChart({
			        theme: $(document).data("kendoSkin") || "default",
			        title: {
			            text: "Work of month"
			        },
			        legend: {
			            position: "bottom"
			        },
			        seriesDefaults: {
			            type: "bar",
			            stack: true
			        },
			        series: [{
			            name: "Open Jobs",
			            data: [67.96, 128.93,  78]
			        }, {
			            name: "Completed",
			            data: [15.7,  23.5, 26.6]
			        }],
			        valueAxis: {
			            labels: {
			                format: "{0}  "
			            }
			        },
			        categoryAxis: {
			            categories: ["Jan", "Feb", "Mar"]
			        },
			        tooltip: {
			            visible: true,
			            format: "{0}  "
			        }
			    });
			}
		          



                $(document).ready(function() {
			
				    setTimeout(function() {
					    createChart2();
				        $("#example").bind("kendo:skinChange", function(e) {
					        createChart2();
					    });
				    }, 240);

				    $("#monitor").kendoGrid({
                    	columns: [
          						{ field: "sumary", width: "40%" },
          						{ field: "worklist", width: "60%" }
          						 
          						
          						],
          						height: 300,
        						 
                                scrollable: false,
        						pageable: false,
        						 
  						 
                    }); 

				    $("#history").kendoGrid({
                    	columns: [
          						{ field: "history", width: "100%" },
          						],
          						height: 300,
        						 
                                scrollable: false,
        						pageable: false,
        						 
  						 
                    }); 

                    $("#worklist").kendoGrid({
                    	columns: [
          						{ field: "wf_id", width: "10px" },
          						{ field: "wf_date", width: "80px" },
          						{ field: "wf_job_title", width: "50px" },
          						{ field: "wf_job_status", width: "50px" },
          					//	{ field: "wf_form", width: "50px" },
          						{ field: "view", width: "10px" }
          						
          						],
          						height: 270,
        						 
                                scrollable: false,
                                pageable: true,
        						dataSource: {
        							pageSize: 5
        						} 
  						 
                    }); 

                    $("#grid").kendoGrid({
						columns: [
						{ field: "t_id", width: "10px" },
						{ field: "date", width: "80px" },
						{ field: "form", width: "50px" },
						{ field: "type_product", width: "50px" },
						{ field: "type_of", width: "10px" },
						{ field: "gram", width: "10px" },
						{ field: "reel_no", width: "50px" },
						{ field: "grade", width: "10px" },
						{ field: "userkey", width: "120px" },
						{ field: "status", width: "30px" },
						{ field: "control",  width: "30px" }
						],
						 
			            height: 270,
						filterable: true,  
                        scrollable: false,
						pageable: true,
						dataSource: {
						pageSize: 5
						} 
                    });
                });
            </script> 
